<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 百度热榜 -->
    <style>
        a {
            color: blue;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        table {
            width: 536px;
        }

        .title {
            line-height: 50px;
        }

        .title .col-1 {
            font-size: 20px;
            font-weight: bolder;
        }

        .title .col-2 {
            font-size: 15px;
        }

        .icon-refresh {
            background-image: url(./refresh.png);
            width: 18px;
            height: 18px;
            background-size: 100% 100%;
            display: inline-block;
            vertical-align: text-bottom;
        }

        .icon-hot {
            background-image: url(./hot.png);
            width: 15px;
            height: 18px;
            background-size: 100% 100%;
            display: inline-block;
            vertical-align: text-bottom;
            margin-bottom: 2px;
        }

        .col-1 {
            width: 80%;
            text-align: left;
            vertical-align: middle;
        }

        .col-2 {
            width: 20%;
            text-align: center;
        }

        .content {
            font-size: 18px;
            line-height: 40px;
        }

        .content .col-1, .content .col-2 {
            border-bottom: 2px solid #f3f3f3;
        }

        .first {
            background-color: #f54545;
            padding: 0px 5px 0px; /* 上下内边距0，左右内边距5*/
            text-align: center;
        }

        .second {
            background-color: #ff8547;
            padding: 0px 5px 0px;
            text-align: center;
        }

        .third {
            background-color: #ffac38;
            padding: 0px 5px 0px;
            text-align: center;
        }
        
        .fourth {
            background-color: #8eb9f5;
            padding: 0px 5px 0px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table cellspacing="0px">
        <tr class="title">
            <th class="col-1">百度热榜</th>
            <th class="col-2">
                <a href="#">换一换</a>
                <span class="icon-refresh"></span>
            </th>
        </tr>
        <tr class="content">
            <td class="col-1">
                <span class="first">1</span>
                <a href="#">浙大回应不开除强奸犯学生</a>
                <span class="icon-hot"></span>
            </td>
            <td class="col-2">480万</td>
        </tr>

        <tr class="content">
            <td class="col-1">
                <span class="second">2</span>
                <a href="#">浙大回应不开除强奸犯学生</a>
                <span class="icon-hot"></span>
            </td>
            <td class="col-2">470万</td>
        </tr>

        <tr class="content">
            <td class="col-1">
                <span class="third">3</span>
                <a href="#">浙大回应不开除强奸犯学生</a>
                <span class="icon-hot"></span>
            </td>
            <td class="col-2">460万</td>
        </tr>

        <tr class="content">
            <td class="col-1">
                <span class="fourth">4</span>
                <a href="#">浙大回应不开除强奸犯学生</a>
                <span class="icon-hot"></span>
            </td>
            <td class="col-2">450万</td>
        </tr>
    </table>

</body>

</html>